
// window.onscroll = function () {
//   var nav = document.querySelector('.right_position');
//   var childElement = nav.querySelector('.child_element_2');
//   var child_element_1 = nav.querySelector('.child_element_1');
//   var child_element_3 = nav.querySelector('.child_element_3');
//   var child_element_4 = nav.querySelector('.child_element_4');
//   var child_element_5 = nav.querySelector('.child_element_5');
//   var child_element_6= nav.querySelector('.child_element_6');
//   var child_element_7 = nav.querySelector('.child_element_7');
//   var child_element_8 = nav.querySelector('.child_element_8');
//   var child_element_9 = nav.querySelector('.child_element_9');
//   var child_element_10 = nav.querySelector('.child_element_10');
//   var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

//   console.log(scrollTop);
//   if (scrollTop >= 4000) {
//     child_element_10.style.background = 'rgb(8, 175, 177)';
//     child_element_10.style.color = '#fff';
//     child_element_9.style.background = 'none'
//     child_element_9.style.color = '#999';
//   }else if (scrollTop >= 3500) {
//     child_element_9.style.background = 'rgb(225, 91, 56)';
//     child_element_9.style.color = '#fff';
//     child_element_8.style.background = 'none'
//     child_element_8.style.color = '#999';
//   }else if (scrollTop >= 3300) {
//     child_element_8.style.background = 'rgb(104, 163, 46)';
//     child_element_8.style.color = '#fff';
//     child_element_7.style.background = 'none'
//     child_element_7.style.color = '#999';
//   }else if (scrollTop >= 3100) {
//     child_element_7.style.background = 'rgb(239, 173, 8)';
//     child_element_7.style.color = '#fff';
//     child_element_6.style.background = 'none'
//     child_element_6.style.color = '#999';
//   }else if (scrollTop >= 2800) {
//     child_element_6.style.background = 'rgb(225, 91, 56)';
//     child_element_6.style.color = '#fff';
//     child_element_5.style.background = 'none'
//     child_element_5.style.color = '#999';
//   }else if (scrollTop >= 2400) {
//     child_element_5.style.background = 'rgb(8, 175, 177)';
//     child_element_5.style.color = '#fff';
//     child_element_4.style.background = 'none'
//     child_element_4.style.color = '#999';
//   }else if (scrollTop >= 1900) {
//     child_element_3.style.background = 'none'
//     child_element_3.style.color = '#999';
//     child_element_4.style.background = 'rgb(239, 173, 8)';
//     child_element_4.style.color = '#fff';
//   }else if (scrollTop >= 1400) {
//     child_element_3.style.background = 'rgb(2, 152, 214)';
//     child_element_3.style.color = '#fff';
//     childElement.style.background = 'none';
//     childElement.style.color = '#999';
//   } else if (scrollTop >= 1100) {
//     // 当滚动位置大于等于 1100px 时，改变子元素样式
//     childElement.style.background = 'rgb(81, 122, 192)';
//     childElement.style.color = '#fff';
//     child_element_1.style.background = 'none';
//     child_element_1.style.color = '#999';
//   } else if (scrollTop >= 600) {
//     // 当滚动位置在 600px 到 1100px 之间时，更新导航样式
//     nav.style.opacity = '1';
//     nav.style.top = '60px';
//     nav.style.transition = 'opacity 0.5s, top 0.5s';

//     // 恢复子元素的默认样式
//     childElement.style.background = ''; // 恢复为默认值或空字符串
//     childElement.style.color = ''; // 恢复为默认值或空字符串
//   } else {
//     // 当滚动位置小于 600px 时，隐藏导航
//     nav.style.opacity = '0';
//     nav.style.top = '0px';
//     nav.style.transition = 'opacity 0.5s';

//     // 恢复子元素的默认样式
//     childElement.style.background = ''; // 恢复为默认值或空字符串
//     childElement.style.color = ''; // 恢复为默认值或空字符串
//   }
// };
window.onload = function() {
  // 缓存选择器
  var nav = document.querySelector('.right_position');
  var childElements = {
    1: nav.querySelector('.child_element_1'),
    2: nav.querySelector('.child_element_2'),
    3: nav.querySelector('.child_element_3'),
    4: nav.querySelector('.child_element_4'),
    5: nav.querySelector('.child_element_5'),
    6: nav.querySelector('.child_element_6'),
    7: nav.querySelector('.child_element_7'),
    8: nav.querySelector('.child_element_8'),
    9: nav.querySelector('.child_element_9'),
    10: nav.querySelector('.child_element_10')
  };

  // 重置所有子元素的样式
  function resetChildElements() {
    Object.values(childElements).forEach(element => {
      element.style.background = 'none';
      element.style.color = '#999';
    });
  }

  // 更新指定子元素的样式
  function updateChildElementStyle(index, bgColor, textColor) {
    resetChildElements();
    if (childElements[index]) {
      childElements[index].style.background = bgColor;
      childElements[index].style.color = textColor;
    }
  }

  window.onscroll = function () {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    if (scrollTop >= 3850) {
      updateChildElementStyle(10, 'rgb(8, 175, 177)', '#fff');
    } else if (scrollTop >= 3500) {
      updateChildElementStyle(9, 'rgb(225, 91, 56)', '#fff');
    } else if (scrollTop >= 3200) {
      updateChildElementStyle(8, 'rgb(104, 163, 46)', '#fff');
    } else if (scrollTop >= 3100) {
      updateChildElementStyle(7, 'rgb(239, 173, 8)', '#fff');
    } else if (scrollTop >= 2800) {
      updateChildElementStyle(6, 'rgb(225, 91, 56)', '#fff');
    } else if (scrollTop >= 2400) {
      updateChildElementStyle(5, 'rgb(8, 175, 177)', '#fff');
    } else if (scrollTop >= 1900) {
      resetChildElements();
      childElements[4].style.background = 'rgb(239, 173, 8)';
      childElements[4].style.color = '#fff';
    } else if (scrollTop >= 1400) {
      updateChildElementStyle(3, 'rgb(2, 152, 214)', '#fff');
    } else if (scrollTop >= 1100) {
      updateChildElementStyle(2, 'rgb(81, 122, 192)', '#fff');
    } else if (scrollTop >= 600) {
      nav.style.opacity = '1';
      nav.style.top = '60px';
      nav.style.transition = 'opacity 0.5s, top 0.5s';
      updateChildElementStyle(1, 'rgb(58, 168, 96)', '#fff');
    } else {
      nav.style.opacity = '0';
      nav.style.top = '0px';
      nav.style.transition = 'opacity 0.5s';
    }
  };
};

